<template>
  <div style="margin-top: 20px">
    <!--块类统计-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <h3>本月下单量</h3>
          <div style="font-size: 16px">
            <i class="el-icon-s-shop" style="color: purple"></i>
            <span>{{ data.count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>派送中</h3>
          <div style="font-size: 16px">
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ data.Delivery }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>派送完成</h3>
          <div style="font-size: 16px">
            <i class="el-icon-s-flag" style="color: red"></i>
            <span>{{ data.Complete }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>异常件</h3>
          <div style="font-size: 16px">
            <i class="el-icon-star-on" style="color: blue"></i>
            <span>{{ data.Error }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--acharts统计图-->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <echarts1 />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <echarts2 />
        </el-card>
        <el-card class="box-card">
          <echarts3 />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts1 from "./Echarts/echarts1.vue";
import echarts2 from "./Echarts/echarts2.vue";
import echarts3 from "./Echarts/echarts3.vue";
import { getStatisticalData } from "@/api";

export default {
  name: "home",
  components: {
    echarts1,
    echarts2,
    echarts3,
  },
  data() {
    return {
      data: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const res = await getStatisticalData();
      if (res.data.status === 200) {
        this.data = res.data.data;
      }
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
  text-align: center;
}
</style>

<!--<template>-->
<!--  <div>-->
<!--    <el-card class="box-card" shadow="never">-->
<!--      <div class="text item">-->
<!--        <el-row :gutter="10">-->
<!--          <el-col class="bg-color" :span="12">-->
<!--            <div class="company_logo">-->
<!--              <img class="header_svg" src="@/assets/img/company.png" />-->
<!--              <span-->
<!--                class="company_name"-->
<!--                style="font-weight: bold"-->
<!--                v-if="company_name"-->
<!--                >{{ company_name }}</span-->
<!--              >-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col class="bg-color" :span="6">-->
<!--            <div class="compang_money">-->
<!--              <img class="header_svg" src="@/assets/imgs/money.svg" />-->
<!--              <div class="company_name">-->
<!--                可用余额：-->
<!--                <span style="color: #ffa500; font-weight: bold">-</span>-->
<!--                <div class="money_btn">-->
<!--                  <el-row>-->
<!--                    <el-button type="primary" size="mini">立即充值</el-button>-->
<!--                    <el-button type="primary" size="mini">消费明细</el-button>-->
<!--                  </el-row>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row></el-row>-->
<!--        <el-row :gutter="10">-->
<!--          <el-col :span="19">-->
<!--            <div-->
<!--              style="-->
<!--                border-top: 1px solid rgb(220, 220, 220);-->
<!--                padding: 10px;-->
<!--                display: flex;-->
<!--              "-->
<!--            >-->
<!--              <div-->
<!--                class="summary"-->
<!--                style="-->
<!--                  background-color: rgb(204, 51, 63);-->
<!--                  border: 1px solid rgb(204, 51, 63);-->
<!--                "-->
<!--              >-->
<!--                待处理订单-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(91, 144, 239)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/daishenhe.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(39, 199, 255)">{{-->
<!--                      pending-->
<!--                    }}</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">待审核</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(102, 160, 255)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/daidabao.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(229, 124, 209)">{{-->
<!--                      Handle-->
<!--                    }}</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">待打包</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div-->
<!--              style="-->
<!--                border-top: 1px solid rgb(220, 220, 220);-->
<!--                padding: 10px;-->
<!--                display: flex;-->
<!--              "-->
<!--            >-->
<!--              <div-->
<!--                class="summary"-->
<!--                style="-->
<!--                  background-color: rgb(235, 104, 65);-->
<!--                  border: 1px solid rgb(235, 104, 65);-->
<!--                "-->
<!--              >-->
<!--                仓储-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(0, 129, 204)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step12.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(0, 129, 204)">{{-->
<!--                      allocable-->
<!--                    }}</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">可配货</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(255, 189, 39)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step10.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(255, 189, 39)">{{-->
<!--                      unallocat-->
<!--                    }}</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">T+1未配货</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(229, 164, 23)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step11.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(229, 164, 23)">{{-->
<!--                      scarce-->
<!--                    }}</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">缺货</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div-->
<!--              style="-->
<!--                border-top: 1px solid rgb(220, 220, 220);-->
<!--                border-bottom: 1px solid rgb(220, 220, 220);-->
<!--                padding: 10px;-->
<!--                display: flex;-->
<!--              "-->
<!--            >-->
<!--              <div-->
<!--                class="summary"-->
<!--                style="-->
<!--                  background-color: rgb(0, 160, 176);-->
<!--                  border: 1px solid rgb(0, 160, 176);-->
<!--                "-->
<!--              >-->
<!--                物流跟踪-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(255, 95, 107)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step3.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(255, 95, 107)"-->
<!--                      >-</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">已出库</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(0, 118, 198)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step7.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(0, 118, 198)">-</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">已申报</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(255, 18, 75)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step4.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(255, 18, 75)">-</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">清关中</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(255, 169, 67)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/step5.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(255, 169, 67)"-->
<!--                      >-</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">派送中</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="modules">-->
<!--                <div-->
<!--                  class="modules-items-left"-->
<!--                  style="border-color: rgb(46, 192, 231)"-->
<!--                >-->
<!--                  <img class="imags_svg" src="@/assets/imgs/yiqianshou.svg" />-->
<!--                </div>-->
<!--                <div class="modules-items-right">-->
<!--                  <div>-->
<!--                    <span class="number" style="color: rgb(101, 224, 183)"-->
<!--                      >-</span-->
<!--                    ><span class="unit">个</span>-->
<!--                  </div>-->
<!--                  <div class="mt5"><span class="headline">已签收</span></div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col class="notify" :span="5">-->
<!--            <el-card class="box-card box-notice" shadow="never">-->
<!--              <div slot="header" class="clearfix fsize">-->
<!--                <span>通知/公告</span>-->
<!--              </div>-->
<!--              <div class="text item">-->
<!--                <li-->
<!--                  class="notice_item"-->
<!--                  v-for="item in notice_list"-->
<!--                  :key="item.notice_id"-->
<!--                  style="list-style: none"-->
<!--                  @click="handClick(item)"-->
<!--                >-->
<!--                  <span class="overflow-text">【{{ item.notice_title }}】</span>-->
<!--                  <span class="unix">{{-->
<!--                    new Date(item.create_time * 1000).toLocaleString()-->
<!--                  }}</span>-->
<!--                </li>-->
<!--              </div>-->
<!--            </el-card>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </el-card>-->
<!--    <el-card class="box-card">-->
<!--      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
<!--        <el-tab-pane label="帮助目录" name="first">-->
<!--          <HelpMenu></HelpMenu>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="韩国专线小包费用" name="second"-->
<!--          >韩国专线小包费用-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="国内仓库收费明细" name="third"-->
<!--          >国内仓库收费明细-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="海外仓收费明细" name="fourth"-->
<!--          >海外仓收费明细-->
<!--        </el-tab-pane>-->
<!--      </el-tabs>-->
<!--    </el-card>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import HelpMenu from "./components/help-menu.vue";-->
<!--import {-->
<!--  getUserNotice,-->
<!--  pendingReview,-->
<!--  pendingHandle,-->
<!--  allocableGoods,-->
<!--  unallocated,-->
<!--  scarceGoods,-->
<!--  getTrack,-->
<!--} from "@/api/index";-->

<!--export default {-->
<!--  components: {-->
<!--    HelpMenu,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      activeName: "first",-->
<!--      company_name: this.$store.getters.userInfo.company_name,-->
<!--      notice_list: [],-->
<!--      pending: null,-->
<!--      Handle: null,-->
<!--      allocable: null,-->
<!--      unallocat: null,-->
<!--      scarce: null,-->
<!--      Track: null,-->
<!--      option: {-->
<!--        span: 6,-->
<!--        data: [-->
<!--          {-->
<!--            click: function (item) {-->
<!--              alert(JSON.stringify(item));-->
<!--            },-->
<!--            title: "错误日志",-->
<!--            count: 12332,-->
<!--            icon: "el-icon-warning",-->
<!--            color: "rgb(49, 180, 141)",-->
<!--          },-->
<!--          {-->
<!--            click: function (item) {-->
<!--              alert(JSON.stringify(item));-->
<!--            },-->
<!--            title: "数据展示",-->
<!--            count: 33,-->
<!--            icon: "el-icon-view",-->
<!--            color: "rgb(56, 161, 242)",-->
<!--          },-->
<!--          {-->
<!--            click: function (item) {-->
<!--              alert(JSON.stringify(item));-->
<!--            },-->
<!--            title: "权限管理",-->
<!--            count: 2223,-->
<!--            icon: "el-icon-setting",-->
<!--            color: "rgb(117, 56, 199)",-->
<!--          },-->
<!--        ],-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleClick(tab, event) {-->
<!--      console.log(tab, event);-->
<!--    },-->
<!--    handClick(item) {-->
<!--      this.$alert(item.notice_content, {-->
<!--        dangerouslyUseHTMLString: true,-->
<!--      });-->
<!--    },-->
<!--  },-->
<!--  async created() {-->
<!--    const pending = await pendingReview();-->
<!--    this.pending = pending.data.count;-->
<!--    //-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--    const Handle = await pendingHandle();-->
<!--    this.Handle = Handle.data.count;-->

<!--    const allocable = await allocableGoods();-->
<!--    this.allocable = allocable.data.count;-->

<!--    const unallocat = await unallocated();-->
<!--    this.unallocat = unallocat.data.count;-->

<!--    const scarce = await scarceGoods();-->
<!--    this.scarce = scarce.data.count;-->

<!--    const Track = await getTrack("1");-->

<!--    const res = await getUserNotice();-->
<!--    this.notice_list = res.data.data.data.reverse();-->
<!--  },-->
<!--  mounted() {},-->
<!--};-->
<!--</script>-->
<!--<style>-->
<!--.el-message-box {-->
<!--  width: 600px;-->
<!--}-->
<!--</style>-->
<!--<style lang="scss" scoped>-->
<!--.company_logo {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: start;-->
<!--  height: 60px;-->
<!--  line-height: 60px;-->
<!--}-->

<!--.imags_svg {-->
<!--  width: 36px;-->
<!--  height: 36px;-->
<!--}-->

<!--.header_svg {-->
<!--  width: 55px;-->
<!--  height: 55px;-->
<!--}-->

<!--.compang_money {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  height: 60px;-->
<!--}-->

<!--.company_name {-->
<!--  font-size: 16px;-->
<!--  margin-left: 10px;-->
<!--}-->

<!--.box-card {-->
<!--  background-color: #fff;-->
<!--  overflow: hidden;-->
<!--  color: #303133;-->
<!--  -webkit-transition: 0.3s;-->
<!--  transition: 0.3s;-->
<!--}-->

<!--.notify {-->
<!--  margin-top: -34px;-->

<!--  .text {-->
<!--    height: 280px;-->
<!--    overflow-y: auto;-->
<!--  }-->
<!--}-->

<!--.item {-->
<!--  .el-row {-->
<!--    // margin-top: 5px;-->
<!--    padding-top: 5px;-->
<!--  }-->
<!--}-->

<!--.summary {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  width: 90px;-->
<!--  padding: 15px 0;-->
<!--  margin-left: 60px;-->
<!--  border-radius: 10px;-->
<!--  color: #fff;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.modules {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  border: 1px solid rgb(220, 220, 220);-->
<!--  width: 160px;-->
<!--  padding: 15px 5px 15px 15px;-->
<!--  border-radius: 10px;-->
<!--  margin-left: 10px;-->

<!--  .modules-items-left {-->
<!--    display: flex;-->
<!--    -webkit-box-pack: center;-->
<!--    justify-content: center;-->
<!--    -webkit-box-align: center;-->
<!--    align-items: center;-->
<!--    text-align: center;-->
<!--    width: 40px !important;-->
<!--    height: 40px !important;-->
<!--    border-width: 2px;-->
<!--    border-style: solid;-->
<!--    border-color: initial;-->
<!--    border-image: initial;-->
<!--    border-radius: 50%;-->
<!--  }-->

<!--  .modules-items-right {-->
<!--    display: flex;-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--    padding-left: 5px;-->
<!--  }-->
<!--}-->

<!--.el-card.is-always-shadow {-->
<!--  -webkit-box-shadow: none;-->
<!--  box-shadow: none;-->
<!--  border: none !important;-->
<!--}-->

<!--.text {-->
<!--  font-size: 14px;-->

<!--  .notice_item {-->
<!--    display: flex;-->
<!--    justify-content: space-around;-->
<!--    align-items: center;-->
<!--    line-height: 30px;-->
<!--    color: #2e82ff;-->
<!--    border-bottom: 1px solid #ededed;-->

<!--    .overflow-text {-->
<!--      display: inline-block;-->
<!--      width: 150px;-->
<!--      white-space: nowrap;-->
<!--      overflow: hidden;-->
<!--      text-overflow: ellipsis;-->
<!--    }-->

<!--    &:hover {-->
<!--      cursor: pointer;-->
<!--      color: #24acf2;-->
<!--    }-->

<!--    .unix {-->
<!--      font-size: 10px;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.el-card {-->
<!--  border: none;-->
<!--}-->

<!--.el-card ::v-deep .el-card__header {-->
<!--  padding: 4px 10px;-->
<!--}-->

<!--.item {-->
<!--  // margin-bottom: 12px;-->
<!--  li {-->
<!--    margin-bottom: 8px;-->
<!--  }-->
<!--}-->

<!--.clearfix:after {-->
<!--  display: table;-->
<!--  content: "";-->
<!--}-->

<!--.fsize {-->
<!--  font-size: 20px;-->
<!--}-->

<!--.clearfix:after {-->
<!--  clear: both;-->
<!--}-->

<!--.el-button&#45;&#45;mini {-->
<!--  padding: 5px 10px;-->
<!--  font-size: 14px;-->
<!--}-->

<!--::-webkit-scrollbar {-->
<!--  display: none;-->
<!--  width: 4px;-->
<!--  height: 6px;-->
<!--}-->

<!--::-webkit-scrollbar-track {-->
<!--  border-radius: 3px;-->
<!--  background: rgba(0, 0, 0, 0.06);-->
<!--  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);-->
<!--}-->

<!--/* 滚动条滑块 */-->
<!--::-webkit-scrollbar-thumb {-->
<!--  border-radius: 3px;-->
<!--  background: rgba(0, 0, 0, 0.12);-->
<!--  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);-->
<!--}-->
<!--</style>-->
